<template>
    <div class="todo-li">
        <li>
            <el-row :gutter="6">
                <label>
                    <el-col :span="1">
                        <input type="checkbox"
                               :checked="todo.done"
                               @change="handleChecked(todo.id)"/>
                    </el-col>
                    <el-col :span="18">
                            <span style="padding-left: 6px;"
                                  v-show="!todo.isEdit"
                            >{{todo.title}}</span>
                        <el-input
                                @input="handleInput(todo, $event)"
                                v-show="todo.isEdit"
                                :value="todo.title"
                                @blur="handleBlur(todo, $event)"
                                @keyup.enter.native="handleInput(todo, null, true)"
                                ref="inputTitle"
                        ></el-input>
                    </el-col>
                </label>
                <el-col :span="2">
                    <el-button style="margin: 10px 10px 10px 0px;"
                            round
                            size="mini"
                            @click="handleEdit(todo)"
                    >编辑
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button style="margin: 10px 10px 0px;"
                            round
                            size="mini"
                            @click="handleDelete(todo.id)"
                    >删除
                    </el-button>
                </el-col>

            </el-row>
        </li>
    </div>
</template>

<script>
    export default {
        name: "MyItem",
        /* v-model 是不推荐监听props中的属性的,违反原则, vue是不能通过v-model修改props属性的 */
        // props: ['todo', 'handleCheckTableData', 'handleDeleteData'],
        props: ['todo'],
        methods: {
            handleChecked(todoId) {
                // this.handleCheckTableData(todoId)
                this.$bus.$emit('handleCheckedTableData', todoId)
            },
            handleDelete(todoId) {
                if (confirm('确认删除?'))
                    // this.handleDeleteData(todoId)
                    this.$bus.$emit('handleDeleteData', todoId)
            },
            handleEdit(todo) {
                if (Object.prototype.hasOwnProperty.call('isEdit', todo)) {
                    todo.isEdit = true
                } else {
                    /* 来自vue监听数组对象的方式 */
                    this.$set(todo, 'isEdit', true)
                }
                // 在下一次DOM元素进行渲染后执行
                this.$nextTick(() => {
                    // 聚焦
                    this.$refs.inputTitle.focus()
                })
            },
            handleBlur(todo, e) {
                if (!e.target.value.trim()) return alert('输入不能为空')
                todo.isEdit = false
                this.$bus.$emit('handleEditData', todo.id, e.target.value)
            },
            handleInput(todo, value, enter) {
                if (!value && enter) return this.$refs.inputTitle.blur()
                this.$bus.$emit('handleEditData', todo.id, value)
            }
        }
    }
</script>

<style scoped>
    .todo-li {
        list-style: none;
        margin: 15px 20px 5px 0px;
        height: 50px;
        border-bottom: 1px solid #cccccc;
        border-radius: 8px;
    }

    .todo-li li {
        line-height: 50px;
    }

    .todo-li .el-button {
        display: none;
    }

    /* 这里最初我出现了一个错误, 我将hover设置到了el-button上,
    实际el-button已经隐藏hover无法生效, 所以需要将hover设置到存在的元素上 */
    .todo-li:hover .el-button {
        display: block;
    }

    .todo-li:hover {
        background-color: #cccccc;
    }
</style>